<template>
  <div>
    <van-dropdown-menu>
      <van-dropdown-item title="综合"  disabled />
      <van-dropdown-item title="价格" @change="priceChange" v-model="priceVal" :options="option2" />
      <van-dropdown-item title="分类" @change="categoryChange" v-model="categoryVal" :options="filterCategory" />
    </van-dropdown-menu>

    <Products v-if="goodsList.length!==0" :goodsList="goodsList"></Products>
    <van-empty v-else description="搜索内容为空" image="search" />

  </div>
</template>

<script>
import Products from '@/components/Products'
export default {
  name: 'SearchProducts',
  props:["filterCategory","goodsList"],
  components: { Products },
  data () {
    return {
      priceVal:'',
      categoryVal:0,
      option2 : [
        { text: '价格由高到低', value: 'desc' },
        { text: '价格由低到高', value: 'asc' },
      ],
    }
  },
  created () {

  },
  beforeUpdate () {
    // 数据挂载完毕，遍历filterCategory数组，查看哪项checked为true
    // 把为true的赋值给this.categoryVal，意为选中的筛选条件
      this.filterCategory.map(item=>{
        if(item.checked){
          this.categoryVal=item.value
          return
        }
      })


  },
  computed: {},
  methods: {
    // 分类排序方法
    categoryChange(val){
      // val 为分类id
      // 子组件调用父组件的方法
      this.$emit('categoryChange',val)
    },
    // 价格排序方法
    priceChange(val){
      this.$emit('priceChange',val)
    }
  }
}
</script>

<style lang="less" scoped>

</style>
